<template>
	<view>
		<view v-for="(item,index) in homeDatas" :key="index">
			<view class="article-wrap">
				<view class="article-wrap-heard">
					<view class="article-wrap-avalter">
						<image :src="item.userinfoData[0].avatarUrl" mode=""></image>
						<text>{{item.userinfoData[0].nickName}}</text>
					</view>
					<view class="article-wrap-guanzhu" @click="shoucang(item._id)">收藏</view>
				</view>
				<view class="article-wrap-text" @click="preimage(item._id)">
					<text>{{item.textarea}}</text>
					<view class="article-wrap-text-img borderduis">
						<block v-for="(items,index) in item.uploadImg" :key="index">
							<image :src="items" mode="aspectFill"></image>
						</block>
					</view>
				</view>
				<view class="article-wrap-time">
					<text>发表时间：{{item.time}}</text>
				</view>

				<view class="article-wrap-bottom" @click="preimage(item._id)">
					<view class="article-wrap-dianzan">
						<image src="../../../static/zan1.png" mode=""></image>
					</view>
					<view class="article-wrap-dianzan">
						<image src="../../../static/pinglun1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>

	</view>
</template>

<script>
	//引入预览图片模块
	import packmages from '../../../components/images.js'

	//引入请求用户模块
	import getusers from '../../../components/getUser.js'
	//顶部消息提示插件
	 import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"

	export default {
		props: {
			homeDatas: Array
		},
		data() {
			return {

			}
		},
		components:{
			HMmessages
		},
		methods: {
			//预览图片
			preimage(id) {
				wx.navigateTo({
					url: '../details/details?id=' + id
				})
			},

			//获取当前id
			shoucang(id) {
				// console.log(id)
				this.isUser(id)
			},

			//判断用户是否登录
			isUser(id) {
				let myuser = 'users';
				getusers(myuser).then(res => {
					// console.log(res)
					if(res.data.length!=0){
						console.log('已经登录')
						//查询当前数据库中是否有这条数据，没有的话添加，有的话提示已经添加
						this.whereGetData(id)
					}else{
						this.HMmessages.show("请先去个人中心登录",{icon:'error',fontColor:'#000000',background:'#f40000',iconColor:'#000000'})

					}
				}).catch(err => {
					console.log(err)
				})
			},
			//查询当前数据库中是否有这条数据，没有的话添加，有的话提示已经添加
			whereGetData(id){
				const db = wx.cloud.database()
				db.collection('collect').where({
					myid:id
				}).get().then(res=>{
					console.log(res)
					if(res.data.length==0){
						console.log('收藏中没有这条记录')
						console.log(res)
						//没有记录去查询记录 然后添加
						this.getIdtxtear(id)
					}else{
						this.HMmessages.show("该帖已收藏！",{icon:'danger',fontColor:'#000000',background:'#f4c61f',iconColor:'#000000'})
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			//没有记录去查询记录 然后添加
			getIdtxtear(id){
				const db = wx.cloud.database()
				db.collection('textarea').where({
					_id:id
				}).get().then(res=>{
					let myres ={
						id:res.data[0]._id,
						textarea:res.data[0].textarea,
						time:res.data[0].time,
						avatarUrl:res.data[0].userinfoData[0].avatarUrl,
						nickName:res.data[0].userinfoData[0].nickName
					}
					console.log('dasdasd',myres)
					
					// console.log(res.data[0]._id)
					// console.log(res.data[0].textarea)
					// console.log(res.data[0].time)
					// console.log(res.data[0].userinfoData[0].avatarUrl)
					// console.log(res.data[0].userinfoData[0].nickName)
					//最后添加在收藏夹中
					this.collectMy(myres)
				}).catch(err=>{
					console.log(err)
				})
			},
			collectMy(myres){
				let Mres = {
					res:myres,
					myid:myres.id
				}
				const db = wx.cloud.database()
				db.collection('collect').add({
					data:Mres
				}).then(res=>{
					console.log(res)
					this.HMmessages.show("收藏成功！",{icon:'success',fontColor:'#000000',background:'#55ff00',iconColor:'#000000'})
				}).catch(err=>{
					console.log(err)
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.article-wrap {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 20upx 20upx 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;

		.article-wrap-heard {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.article-wrap-avalter {
				display: flex;
				justify-content: start;
				align-items: center;
				padding: 10upx 20upx 20upx 1upx;

				image {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					margin-right: 20upx;
				}

				text {
					color: #505050;
					font-size: 35upx;
					font-weight: bold;
				}
			}

			.article-wrap-guanzhu {
				padding: 10upx 30upx;
				background-color: #5500ff;
				border-radius: 40upx;
				color: #ffffff;
				box-shadow: 0upx 0upx 20upx rgba(0, 170, 255, 0.4);
			}

		}

		.article-wrap-bottom {
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-top: #f0f0f0 1px solid;
			padding: 15upx;

			.article-wrap-dianzan {
				display: flex;
				justify-content: space-around;
				align-items: center;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}

				text {
					color: #7e7e7e;
				}
			}
		}

		.article-wrap-text {
			padding: 2upx 15upx;

			text {
				font-family: "微软雅黑";
				font-size: 34upx;
				color: #161616;
			}

			.article-wrap-text-img {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				image {
					width: 338upx;
					height: 338upx;
					padding: 20upx 25upx 5upx 0;
					box-sizing: border-box;
				}
			}
		}

		.article-wrap-time {
			margin: 20upx;

			text {
				font-size: 28upx;
				color: #666666;
			}
		}
	}
</style>
